<template>
    <div class="classification" style="position: relative;">
      <el-button
        v-if="activeName === 'theme'"
        size="small"
        class="classification-add"
        type="primary"
        @click="addTheme">
        新增主题
      </el-button>
      <el-button
        v-if="activeName === 'industry'"
        size="small"
        class="classification-add"
        type="primary"
        v-permission="addIndustry"
        @click="addIndustry">
        新增行业
      </el-button>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="主题" name="theme" style="min-height: 100px" v-loading="loading1">
          <no-data v-if="!themes.length && !loading1"></no-data>
          <el-row v-if="themes.length" class="bg-color" :gutter="15">
            <el-col :xs="8" :md="6" :lg="4" v-for="(item,index) in themes" :key="index">
              <basic-container>
                <div class="class-card">
                <span class="operation">
                  <i class="el-icon-edit" @click="editTheme(item)"></i>
                  <i class="el-icon-delete mar-l-10" @click="themeDel(item)"></i>
                </span>
                  <i :class="item.icon" class="fts-40"></i>
                  <span class="icon-name">
                    {{item.name}}
                  </span>
                  <span class="theme-resource">
                    资源目录:{{item.catalogCount}}个
                  </span>
                  <span class="theme-resource">
                    信息项:{{item.dataFieldCount}}个
                  </span>
                </div>
              </basic-container>
            </el-col>
          </el-row>

        </el-tab-pane>
        <el-tab-pane label="行业" name="industry" style="min-height: 100px" v-loading="loading2">
          <no-data v-if="!industrys.length && !loading2"></no-data>
          <el-row v-if="industrys.length" class="bg-color" :gutter="15">
            <el-col :xs="8" :md="6" :lg="4" v-for="(item,index) in industrys" :key="index">
              <basic-container>
                <div class="class-card">
                <span class="operation">
                  <i class="el-icon-edit" @click="editIndustry(item)"></i>
                  <i class="el-icon-delete mar-l-10" @click="industryDel(item)"></i>
                </span>
                  <i :class="item.icon" class="fts-40"></i>
                  <span class="icon-name">
                    {{item.name}}
                  </span>
                  <span class="theme-resource">
                    资源目录:{{item.catalogCount}}个
                  </span>
                  <span class="theme-resource">
                    信息项:{{item.dataFieldCount}}个
                  </span>
                </div>
              </basic-container>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-dialog custom-class="dialog-width"  append-to-body :title="(!form.id ? '新增' : '修改') + '主题'" :visible.sync="dialogFormVisible">
        <avue-form ref="form" v-model="form" :option="themeOption">
          <template slot-scope="scope" slot="menuForm">
            <basic-form-button @submit="themeSubmit" @cancel="cancelButtonClick"></basic-form-button>
          </template>
        </avue-form>
      </el-dialog>
      <el-dialog custom-class="dialog-width"  append-to-body :title="(!form.id ? '新增' : '修改') + '行业'" :visible.sync="industryFormVisible">
        <avue-form ref="form" v-model="form" :option="industryOption">
          <template slot-scope="scope" slot="menuForm">
            <basic-form-button @submit="industrySubmit" @cancel="cancelButtonClick"></basic-form-button>
          </template>
        </avue-form>
      </el-dialog>
    </div>
</template>

<script>
  import {
    getThems,
    addTheme,
    editTheme,
    deleteTheme,
    geIndustrys,
    addIndustry,
    editIndustry,
    deleteIndustry
  } from '@/api/resourceCatalog/classification';

  import iconList from '@/config/iconList';

  export default {
    data() {
      return {
        formLabelWidth: '100px',
        dialogFormVisible:false,
        industryFormVisible:false,
        activeName: 'theme',
        form:{
          name:'',
          description:'',
          icon: ''
        },
        loading1: false,
        loading2: false,
        themes: [],
        industrys: [],
        themeOption:{
          size: 'small',
          menuPosition:'right',
          submitBtn:false,
          emptyBtn:false,
          column: [
            {
              label: "名称",
              prop: "name",
              rules: [{
                required: true,
                message: "请输入名称",
                trigger: "blur"
              }]
            },
            {
              label: "图标",
              prop: "icon",
              type: "icon",
              iconList: iconList,
              rules: [{
                required: true,
                message: "请选择图标",
                trigger: "blur"
              }]
            },
            {
              label: "描述",
              prop: "description",
              type: "textarea",
              minRows: 2,
              span: 24
            }
          ]
        },
        industryOption:{
          size: 'small',
          menuPosition:'right',
          submitBtn:false,
          emptyBtn:false,
          column: [
            {
              label: "名称",
              prop: "name",
              rules: [{
                required: true,
                message: "请输入名称",
                trigger: "blur"
              }]
            },
            {
              label: "图标",
              prop: "icon",
              type: "icon",
              iconList: iconList,
              rules: [{
                required: true,
                message: "请选择图标",
                trigger: "blur"
              }]
            },
            {
              label: "描述",
              prop: "description",
              type: "textarea",
              minRows: 2,
              span: 24
            }
          ]
        }
      }
    },
    mounted(){
      this.getThemesData();
      this.getIndustryData();
    },
    methods:{
      submitButtonClick() {
        this.dialogFormVisible = false
      },
      cancelButtonClick() {
        this.dialogFormVisible = false;
        this.industryFormVisible = false
      },
      themeSubmit() {
        this.$refs['form'].validate( valid => {
          if(valid){
            (this.form.id ? editTheme(this.form) : addTheme(this.form)).then(
              res => {
                this.dialogFormVisible = false;
                this.getThemesData();
                this.$message({
                  type: "success",
                  message: "操作成功!"
                });
              }
            )
          }
        });

      },
      editTheme(item) {
        this.form = item;
        this.dialogFormVisible = true;
      },
      editIndustry(item){
        this.form = item;
        this.industryFormVisible = true;
      },
      themeDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return deleteTheme({
              ids: row.id
            });
          })
          .then(() => {
            this.getThemesData();
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      industryDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return deleteIndustry({
              ids: row.id
            });
          })
          .then(() => {
            this.getIndustryData();
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      industrySubmit() {
        this.$refs['form'].validate( valid => {
          if(valid){
            (this.form.id ? editIndustry(this.form) : addIndustry(this.form)).then(
              res => {
                this.industryFormVisible = false;
                this.getIndustryData();
                this.$message({
                  type: "success",
                  message: "操作成功!"
                });
              }
            )
          }
        });
      },
      getThemesData() {
        this.loading1 = true;
        getThems().then( res =>  {
          this.loading1 = false;
          this.themes = res['data'].data || [];
        }).catch(() => {
          this.loading1 = false;
          this.themes = [];
        })
      },
      getIndustryData() {
        this.loading2 = true;
        geIndustrys().then( res =>  {
          this.loading2 = false;
          this.industrys = res['data'].data || [];
        }).catch(() => {
          this.loading2 = false;
          this.industrys = [];
        })
      },
      addIndustry() {
        this.industryFormVisible = true;
        this.form = {
          name: '',
          description: '',
          icon: ''
        }
      },
      addTheme() {
        this.dialogFormVisible = true;
        this.form = {
          name: '',
          description: '',
          icon: ''
        }
      },
      handleClick() {

      }
    }
  }
</script>
<style lang="scss">
  .classification {
    .basic-container {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

  }
  .theme-resource {
    font-size: 12px;
    margin-top: 5px;
  }
  .classification-add {
    position: absolute;
    right:15px;
    z-index: 1;
  }
  .dialog-width {
    width: 60% !important;
  }
  .class-card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100px;
    cursor: pointer;
  }
  .class-card .operation{
    position: absolute;
    top:0;
    right: 0;
    display: none;
    & > i{
      color: #55A9FF;
    }
  }
  .class-card:hover .operation{
    display: block;
  }
  .class-card > i{
    display: block;
    font-size: 42px;
    margin-bottom: 5px;
    color: #0080ff;
    transition: color .15s linear;
  }
  .fr {
    float: right;
  }
  .bg-color {
    //background-color: #f0f2f5;
    padding-top: 12px;
  }
  .h-40 {
    height: 40px;
  }
  .el-dialog__wrapper .el-dialog{
    width:50%;
  }
</style>
